<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>修改密码 | 后台管理</title>
    <link rel="stylesheet" type="text/css" href="./../element-ui/index.css">
    <link rel="stylesheet" type="text/css" href="./../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../components/admin-frame.css"/>
    <link rel="stylesheet" type="text/css" href="./../components/min-width-container.css"/>
    <style>
        #app {
            height: 100%;
        }

        .app-form-wapper-hint {
            width: 620px;
            border-radius: 4px;
            border: 1px solid #EDEDED;
            background: #FDFCE7;
            margin: 20px 0;
        }

        .app-form-wapper-hint > div {
            height: 54px;
            line-height: 54px;
        }
    </style>
</head>
<body>
<div id="app">
    <admin-frame active="6" title="密码修改">
        <min-width-container>
            <div class="app-form-wapper-hint">
                <div class="text-4 text-general-1 p-l-20 p-r-20 ">
                    <span class="text-2 m-r-8" style="font-weight:900; color:#f54f47;">请注意:</span>请尽快修改初始密码
                </div>
            </div>
            <div>
                <template>
                    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                        <el-form-item label="当前密码:" prop="password_current">
                            <el-input size="mini" v-model="form.password_current" show-password></el-input>
                        </el-form-item>
                        <el-form-item label="新密码:" prop="password_new">
                            <el-input size="mini" v-model="form.password_new" show-password></el-input>
                        </el-form-item>
                        <el-form-item label="新密码确认:" prop="password_confirmed">
                            <el-input size="mini" v-model="form.password_confirmed" show-password></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" size="mini" @click="change_password">保存</el-button>
                        </el-form-item>
                    </el-form>
                </template>
            </div>
        </min-width-container>
    </admin-frame>
</div>
<script src="./../js/vue.js"></script>
<script src="./../js/axios.min.js"></script>
<script src="./../element-ui/index.js"></script>
<script src="../components/admin-frame.js"></script>
<script src="./../components/min-width-container.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data() {
            return {
                addr_id: '',
                form: {
                    password_current: "",
                    password_new: "",
                    password_confirmed: "",
                },
                rules: {
                    password_current: [
                        {required: true, message: '请输入当前密码', trigger: 'blur'},
                        {min: 1, max: 16, message: '长度在 1 到 32 个字符', trigger: 'blur'}
                    ],
                    password_new: [
                        {required: true, message: '请输入新密码', trigger: 'blur'},
                        {min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur'}
                    ],
                    password_confirmed: [
                        {required: true, message: '请再次输入密码', trigger: 'blur'},
                        {
                            validator: (rule, value, callback) => {
                                if (this.form.password_new == this.form.password_confirmed) {
                                    callback();
                                } else {
                                    callback("两次输入的密码不一致");
                                }
                            },
                            trigger: 'blur',
                        }
                    ],

                }
            };
        },
        methods: {
            change_password() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        const params = new URLSearchParams();
                        params.append("newpwd", this.form.password_new);
                        params.append("oldpwd", this.form.password_current);
                        axios.post("/user/updatepassword.do", params).then(response => {
                            if (response.data.status === 0) {
                                this.$message({
                                    message: "更新成功",
                                    type: "success"
                                });
                            } else {
                                if (response.data.msg) {
                                    this.$message.error(response.data.msg);
                                }
                            }
                        }).catch(err => {
                            console.log(err);
                            this.$message.error("连接服务器异常");
                        });
                    }
                });
            }
        }
    });

</script>
</body>
</html>
